<template>
    <van-nav-bar :title="proname" left-text="返回" left-arrow @click-left="$router.back()" fixed placeholder />
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
        </van-swipe-item>
    </van-swipe>
    <div v-html="desc"></div>
    <van-action-bar placeholder>
        <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartArr.length" to="/cart" />
        <van-action-bar-button type="warning" text="加入购物车" @click="addCartFn" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>

<script setup>
import { cartAddReq } from '@/api/cart';
import { detailListReq } from '@/api/detail';
import { cartArr } from '@/store/cart';
// import axios from 'axios';
import { showConfirmDialog, showFailToast, showSuccessToast } from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
let route = useRoute();
let router = useRouter();
let proname = ref('');
let images = ref([]);
let desc = ref('');
let proid = route.query.proid;
let token = localStorage.getItem("token");
let userid = localStorage.getItem("userid");
// console.log(proid);
async function getData() {
    // let r = await axios.get("http://localhost:3001/api/pro/detail/" + proid);
    detailListReq(proid).then((r) => {
        console.log(r.data);
        images.value = r.data.data.imgs;
        proname.value = r.data.data.proname;
        desc.value = r.data.data.desc;
    })
}
getData();
async function addCartFn() {
    if (token == null) {
        showConfirmDialog({
            title: '提示',
            message: '需要登录，是否登录?',
        })
            .then(() => {
                router.push("/login")
            })
            .catch(() => { })
    } else {
        // let r = await axios.post("http://localhost:3001/api/cart/add", { userid, proid, num: 1 }, { headers: { token } })
        cartAddReq(userid, proid, 1).then((r) => {
            if (r.data.code == 200) {
                showSuccessToast(r.data.message);
            } else {
                showFailToast(r.data.message);
            }
        })
        // console.log(r.data);

    }
}

</script>

<style></style>